דלג לתוכן הראשי

Resolve route guard

כשאנחנו מקבלים מידע חיצוני, הפעולה יכולה לקחת זמן ובינתיים נטען עמוד ריק.

אנחנו רוצים שהעמוד לא יטען עד שלא יהיה בו כל המידע הנדרש.

יצירת ה-resolver:

ng generate r users

פונקצית ה-resolve מחזירה מידע. אנחנו רוצים את המידע הזה לפני שהעמוד נטען.

נקח את ה-service שאיתו אנחנו שולפים את המידע ונקבל את המידע בתוך ה-resolve.

user.service.ts
getAllUsers(): any{
const userList = new Promise((resolve, reject) => {
resolve(this.users);
})
return userList;
}
users.resolver
constructor(private userService: UserService){}

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {
return this.userService.getAllUsers().then(data => {
return data;
})
}

את ה-resolver צריך להוסיף ל-providers של ה-app.

השלב הבא יהיה להפעיל את ה-resolver על הנתיב המתאים.

app.module
{ path: 'users', component: AllUsersComponent, resolve: {users: UsersResolver} },

המשתנה users יחזיק את המידע שהתקבל מה-service.

כדי להשתמש בו בקומפוננטה:

all-users.component
users: Users[];

constructor(private userService: UserService, private route: ActivatedRoute) {}

ngOnInit(): void {
this.users = this.route.snapshot.data['users'];
}